<template>
  <div class="mobile-fillInfo" v-show="formVisible">
    <div class="form-container">
      <div class="title">{{ $t("form.apply.modal_title") }}</div>
      <div class="form">
        <div class="header">1. {{ $t("form.apply.title_1") }}</div>
        <a-form labelAlign="left">
          <a-form-item :label="$t('form.apply.form.item_1.label')">
            <a-input
              size="large"
              :maxlength="30"
              v-model:value.trim="formData.lastname"
              :placeholder="$t('form.apply.form.item_1.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item :label="$t('form.apply.form.item_2.label')">
            <a-input
              size="large"
              :maxlength="30"
              v-model:value.trim="formData.firstname"
              :placeholder="$t('form.apply.form.item_2.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label="`${$t('form.apply.form.item_3.label')}(DD/MM/YY)`"
          >
            <a-date-picker
              size="large"
              v-model:value="formData.birthday"
              value-format="YYYY-MM-DD"
              placeholder="DD/MM/YY"
              :allowClear="false"
            >
              <template #suffixIcon></template>
            </a-date-picker>
          </a-form-item>
          <a-form-item :label="$t('form.apply.form.item_4.label')">
            <a-input
              size="large"
              :maxlength="30"
              v-model:value.trim="formData.country"
              :placeholder="$t('form.apply.form.item_4.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item :label="$t('form.apply.form.item_5.label')">
            <a-input
              size="large"
              :maxlength="30"
              v-model:value.trim="formData.phone"
              :placeholder="$t('form.apply.form.item_5.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item :label="$t('form.apply.form.item_6.label')">
            <a-input
              size="large"
              :maxlength="50"
              v-model:value.trim="formData.bankId"
              :placeholder="$t('form.apply.form.item_6.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item :label="$t('form.apply.form.item_7.label')">
            <a-input
              size="large"
              :maxlength="30"
              v-model:value.trim="formData.email"
              :placeholder="$t('form.apply.form.item_7.rules.error_1')"
            ></a-input>
          </a-form-item>
          <a-form-item :label="$t('form.apply.form.item_8.label')">
            <a-upload
              list-type="picture-card"
              v-model:file-list="formData.fileList"
            >
              <div>
                <PlusOutlined />
                <div class="upload-text">{{ $t("btnText.upload_idcard") }}</div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form>
      </div>
      <div class="form">
        <div class="header">2. 2. {{ $t("form.apply.title_2") }}</div>
        <div class="table" v-for="item in mockCheckData" :key="item.title">
          <div class="table-header border-bottom cell">{{ item.title }}</div>
          <div class="table-content">
            <div
              class="table-row border-bottom"
              :class="[i % 2 == 0 ? 'background' : '']"
              v-for="(item2, i) in item.checkList"
              :key="i"
            >
              <div class="cell">
                <a-checkbox v-model:checked="item2.checked">{{
                  item2.label
                }}</a-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <a-button type="default" @click="checkAll">{{
        $t("btnText.check_all")
      }}</a-button>
      <a-button type="primary" @click="submit">{{
        $t("btnText.imed_submit")
      }}</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
let formVisible = ref(false);

const show = () => {
  formVisible.value = true;
};

const close = () => {
  formVisible.value = false;
};

const submit = () => {
  close();
};
defineExpose({
  show,
  close,
});

import img from "~/assets/images/common/id-card.png";
const formData = ref<FormData>({
  lastname: "",
  firstname: "",
  birthday: "",
  country: "",
  phone: "",
  bankId: "",
  email: "",
  fileList: [
    {
      uid: "-2",
      name: "image.png",
      status: "done",
      url: img,
    },
  ],
});

const checkData = [
  {
    title: "Category B1.1 Airplane Turbine",
    checkList: [
      {
        label: "AII B1.1 Modules",
        value: "AII B1.1 Modules",
        checked: false,
      },
    ],
    count: 7,
  },
  {
    title: "Category B2 Avionic",
    checkList: [
      {
        label: "AII B1.1 Modules",
        value: "AII B1.1 Modules",
        checked: false,
      },
    ],
    count: 7,
  },
];

checkData.map((item) => {
  for (let index = 0; index < item.count; index++) {
    let obj = JSON.parse(JSON.stringify(item.checkList[0]));
    item.checkList.push(obj);
  }
});

let mockCheckData = ref(checkData);

const checkAll = () => {
  mockCheckData.value.map((item) => {
    item.checkList.map((item2) => {
      item2.checked = true;
    });
  });
};

const clearCheckAll = () => {
  mockCheckData.value.map((item) => {
    item.checkList.map((item2) => {
      item2.checked = false;
    });
  });
};
</script>
<style scoped lang="less">
.mobile-fillInfo {
  position: fixed;
  z-index: 9;
  inset: 0;
  top: var(--yd-header-height);
  background-color: #fff;
  height: calc(100svh - var(--yd-header-height));
  display: flex;
  flex-direction: column;
  .form:last-child {
    margin-top: 164px;
  }
  .form-container {
    flex: 1;
    padding: 82px;
    overflow-y: auto;
    :deep(.ant-form) {
      .ant-form-item-label {
        flex: none;
        width: 700px;
        display: flex;
        align-items: center;
        padding-bottom: 0;
        label {
          font-size: 82px;
        }
      }
      .ant-form-item-control {
        flex: 1;
      }
      .ant-form-item {
        margin-bottom: 0;
        flex: 1;
        border-bottom: 3px solid #e6edf2;
        &:last-child {
          padding-bottom: 82px;
        }
        .ant-upload-wrapper {
          display: block;
        }
        &:last-child > div {
          .ant-form-item-label {
            padding: 82px 0;
          }
          .ant-form-item-control {
            flex: 0 0 100%;
          }
          .ant-upload-list {
            display: flex;
            gap: 56px;
            &::before {
              content: none;
            }
            & > div {
              flex: 1;
              margin: 0;
            }
            .ant-upload,
            .ant-upload-list-item {
              height: 850px;
              max-width: 850px;
            }
            .ant-upload-list-item {
              display: flex;
              overflow: hidden;
              padding: 0;
              &::before {
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
              }
              .ant-upload-list-item-actions {
                display: flex;
                justify-content: center;
                gap: 82px;
                .ant-btn {
                  height: auto !important;
                  padding: 0 !important;
                }
              }
            }
            .ant-upload {
              svg {
                fill: #ccd6de;
                width: 246px;
                height: 246px;
              }
              .upload-text {
                font-size: 72px;
                color: #ccd6de;
              }
            }
          }
        }
      }
      .ant-input,
      .ant-picker {
        padding: 82px;
        padding-right: 0;
        border-color: transparent;
        box-shadow: 0 0 0 transparent;
        &:hover {
          border-color: transparent;
        }
      }
      .ant-picker {
        width: 100%;
      }
      .ant-input,
      .ant-picker input {
        text-align: right;
        &::placeholder {
          text-align: right;
        }
      }
    }
    .title {
      font-weight: 500;
      font-size: 92px;
      color: #172026;
      margin-bottom: 82px;
    }
    .form {
      .header {
        padding: 61px 82px;
        color: #fff;
        background-color: #3d88f2;
        font-size: 82px;
      }
    }
  }
  .btn {
    border-top: 3px solid #e6edf2;
    justify-content: space-between;
    padding: 82px;
    padding-top: 41px;
    .ant-btn:first-child {
      background-color: #e6edf2;
      border-color: transparent;
    }
    .ant-btn {
      width: 850px;
    }
  }
  :deep(.table) {
    &:last-child {
      margin-top: 164px;
      margin-bottom: 82px;
    }
    .table-header {
      font-size: 72px;
      text-align: left;
    }
    .cell {
      padding: 82px !important;
    }
  }
}
</style>
